import React, { Component } from 'react';
import { connect } from 'react-redux';
import DatabaseConnect from './components/dbComponent/dbResourceConnect';
import FileConnect from './components/fileComponent/fileResourceConnect';
import ApiConnect from './components/apiComponent/apiResourceConnect';
import CheckModal from './components/checkComponent/checkPage';


import {sourceData,unsourceData} from './components/configData';

import './style.scss';

import { Layout, Tree,Button,Form,Table,Input,Checkbox,Divider,Spin,InputNumber,Popconfirm} from 'antd';
import dbResourceConnect from './components/dbComponent/dbResourceConnect';

const { Content,Sider,Header,Footer } = Layout;

class Category extends Component{
  state={
    total:20,
    page:1,
    isConnectPage:true,
    totalPage:2,
    dbVisible:false,
    fileVisible:false,
    apiVisible:false,
    checkVisible:false,
    
  }
  showModal = (text,record) => {
    console.log(record.sourceFormat)
    if(record.sourceFormat==="数据库")
    {
      this.setState({
        dbVisible: true,
      });
    }else if(record.sourceFormat==="电子文件"){
      this.setState({
        fileVisible: true,
      });
    }else if(record.sourceFormat==="接口"){
      this.setState({
        apiVisible: true,
      });
    }else{

    }
  };
  cancelModal = () => {
    const {dbVisible,fileVisible,apiVisible,checkVisible}=this.state;
    if(dbVisible===true)
    {
      this.setState({
        dbVisible: false,
      });
    }else if(fileVisible===true)
    {
      this.setState({
        fileVisible: false,
      });
    }else if(apiVisible===true){
      this.setState({
        apiVisible: false,
      });
    }else if(checkVisible===true){
      this.setState({
        checkVisible: false,
      });
    }
    
  };
  handleConnectState=()=>{
    this.setState({
      isConnectPage:!this.state.isConnectPage
    });
  }
  checkConnect=()=>{
    this.setState({
      checkVisible:true
    })
  }
  deleteConnect=()=>{
    
  }
  render(){
    const columns=[
      {
        title:'序号',
        key:'index',
        dataIndex:'index',
      },
      {
        title:'资源代码',
        key:'code',
        dataIndex:'code',
      },
      {
        title:'资源名称',
        key:'sourceName',
        dataIndex:'sourceName',
        render:(text,record)=>{
            return <span className='action'>{text}</span>
        }
       
      },
      {
        title:'资源提供方',
        key:'sourceProvider',
        dataIndex:'sourceProvider',
      },
      {
        title:'共享类型',
        key:'shareType',
        dataIndex:'shareType',
       
      },
      {
        title:'共享方式',
        key:'shareMethod',
        dataIndex:'shareMethod',
      },
      {
        title:'资源格式',
        key:'sourceFormat',
        dataIndex:'sourceFormat',
      },
      {
        title:'关联状态',
        key:'state',
        dataIndex:'state',
       
      },
      {
        title:'操作',
        key:'action',
        dataIndex:'action',
        render:(text,record)=>{
          return <div>
            <span className='action' onClick={()=>this.checkConnect(record)}>查看</span>
            <Divider type='vertical'/>
            <Popconfirm
                    title="确定要取消挂载吗?"
                    placement="top"
                    okText="确认"
                    cancelText="取消"
                  >
                <span className='action' onClick={()=>this.deleteConnect(record)}>取消挂载</span>
            </Popconfirm>
        </div>
        }
      },
    ]
    const columns1=[
      {
        title:'序号',
        key:'index',
        dataIndex:'index',
      },
      {
        title:'资源代码',
        key:'code',
        dataIndex:'code',
      },
      {
        title:'资源名称',
        key:'sourceName',
        dataIndex:'sourceName',
        render:(text,record)=>{
            return <span className='action'>{text}</span>
        }
       
      },
      {
        title:'资源提供方',
        key:'sourceProvider',
        dataIndex:'sourceProvider',
      },
      {
        title:'共享类型',
        key:'shareType',
        dataIndex:'shareType',
       
      },
      {
        title:'共享方式',
        key:'shareMethod',
        dataIndex:'shareMethod',
      },
      {
        title:'资源格式',
        key:'sourceFormat',
        dataIndex:'sourceFormat',
      },
      {
        title:'关联状态',
        key:'state',
        dataIndex:'state',
       
      },
      {
        title:'操作',
        key:'action',
        dataIndex:'action',
        render:(text,record)=>{
          return <span className='action' onClick={()=>{this.showModal(text,record)}}>资源挂接</span>
        }
      },
    ]
    const data=[
      {
        title: '基础信息资源',
        key: '0-0',
        children: [
          {
            title: '国家人口基础信息',
            key: '0-0-0',
          },
          {
            title: '法人单位基础信息',
            key: '0-0-1',
          },
          {
            title: '电子还原信息',
            key: '0-0-2',
          },
        ],
      },
      {
        title: '主题信息资源',
        key: '1-0',
        children: [
          {
            title: '公共服务事项',
            key: '1-0-0',
          },
          {
            title: '全民社会保障',
            key: '1-0-1',
          },
          {
            title: '市场价格监督',
            key: '1-0-2',
          },
        ],
      },
    ]
    const {total,page,totalPage,isConnectPage,isConfirm}=this.state;
    return (
      <Content style={{position:"relative",left:-24}} className='out-content' >
        <Layout className='layout'>
          <Sider className='sider'>
            <Tree
              showLine={true}
              showIcon={true}
              treeData={data}
              multiple
            />
          </Sider>
          <Layout className='right-layout'>
            <Header className='header'>
              <p className='title'>资源挂接</p>
            </Header>
            <Content className='content'>
              <div className='form-inline'>
                <Button type={isConnectPage?"primary":""} onClick={this.handleConnectState}>已挂接</Button>
                <Button type={!isConnectPage?"primary":""} onClick={this.handleConnectState}>未挂接</Button>
              </div>
              <div className='table-box'>
                <Spin spinning={false}>
                  <Table
                    columns={isConnectPage?columns:columns1}
                    dataSource={isConnectPage?sourceData:unsourceData}
                    className='table'
                    pagination={{position:["bottomCenter"]}}
                  />
                  <div className={(isConnectPage?sourceData.length:unsourceData.length)>0?'footer':'withoutPagination'}>
                    显示<InputNumber min={1} max={totalPage} defaultValue={page} />项结果，共{total}项
                  </div>
                </Spin>
              </div>
            </Content>
          </Layout>
          <DatabaseConnect
            visible={this.state.dbVisible}
            cancelDBModal={this.cancelModal}/>
          <FileConnect
            visible={this.state.fileVisible}
            cancelDBModal={this.cancelModal}/>
          <ApiConnect
            visible={this.state.apiVisible}
            cancelDBModal={this.cancelModal}/>
          <CheckModal
            visible={this.state.checkVisible}
            cancelDBModal={this.cancelModal}/> 
        </Layout>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(Category);